// vue的插件机制 Vue.use(对象或函数)
// 如果是对象：必须要有一个方法install
// 如果是函数：这个函数相当于install方法

import XtxSkeleton from '@/components/skeleton/index.vue'
import XtxCarousel from '@/components/carousel/index.vue'
import XtxMore from '@/components/more/index.vue'
import XtxBread from '@/components/bread/index.vue'
import XtxBreadItem from '@/components/bread/item.vue'


import defaultImg from '@/assets/images/200.png'
import {useIntersectionObserver} from '@vueuse/core'

import {App} from 'vue'

export default {
    install(app:App){
        // app.component(XtxSkeleton.name,XtxSkeleton)
        app.component('XtxSkeleton',XtxSkeleton)
        app.component(XtxCarousel.name,XtxCarousel)
        app.component(XtxMore.name,XtxMore)
        app.component(XtxBread.name,XtxBread)
        app.component(XtxBreadItem.name,XtxBreadItem)

        // 自定义图片懒加载指令
        // <img v-lazy="item.picture" alt="" />
        app.directive('lazy',{
            // vue2:inserted(){}
            // vue3:mounted(){}
            mounted(el,binding){
                const {stop} = useIntersectionObserver(el,([{isIntersecting}])=>{
                    if(isIntersecting){
                        el.src = binding.value

                        // 图片加载失败时,用默认图片
                        el.onerror = function(){
                            el.src = defaultImg
                        }
                        stop()
                    }
                },{
                    threshold:0   //阀值 默认是大于0 只有进入的区间大于该值时,才去获取数据
                })
            }
        })

    }
}